<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello</title>
    <!-- 导入vue包 -->
    <script src="./lib/vue2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <a href="" @click.prevent="showel = 'login'">登 录</a> | 
        <a href="" @click.prevent="showel = 'reg'">注 册</a>
        <hr>
        <!-- componet 组件占位符 -->
        <component :is="showel"></component>
    </div>
    <template id="login">
        <div>
            <h3>登 录</h3>
        </div>
    </template>

    <template id="reg">
        <div>
            <h3>注 册</h3>
        </div>
    </template>
    <script>

        // 创建一个vue实例
        var vm = new Vue({
            el:'#app', // 当前new的这个vue实例要控制的DOM
            data: {
                showel: "login"
            },
            components: {
                login:{
                    template: "#login"
                },
                reg: {
                    template: "#reg"
                }
            }
        });


    </script>
</body>
</html>